<div class="login">
	<div class="login-content ui-state-default ui-corner-bl" >
		<form id="userpass" action="<?=base_url()?>index.php/hro/login/">
		<div class="account-info">
			<img src="<?=base_url();?>images/icon/user.png" class="icon">
			<input id="username" type="text" class="ui-widget" placeholder="Username">
		</div>
		<div class="account-info">
			<img src="<?=base_url();?>images/icon/password.png" class="icon">
			<input id="password" type="password" class="ui-widget" placeholder="Password" >
		</div>
		</form>
	</div>
	<button id="btn-login" class="btn-login ui-state-default ui-corner-bottom">
			<img src="<?=base_url();?>images/icon/lock.png" class="icon">
			<span class="text-center ui-button-text">Log In</span>
	</button>
</div>
<script type="text/javascript">
	//login event
	$('#btn-login').click(function(){
		if($('.login-content').is(':hidden')){
			$('.login-content').slideDown();
		}else{
			//login
			$('#userpass').submit();
			/*var username = $('#username').val();
			var password = $('#password').val();
			$.ajax({
				url: "<?=base_url()?>index.php/home/login",
				type: "POST",
				data: {username:username, password:password},
				success: function(data){
				}
			});*/
		}
	}).parent('.login').mouseleave(function(){
		$('.login-content').slideUp();
	});

	//set placeholder with i.e browser
	if($.browser.msie)
	{
		
	};
</script>